<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue 的样式绑定</title>
    <script src="./vue.js"></script>
    <style>
        .activated{
            color: red;
        }
    </style>
</head>
<body>
    <div id="app">

        //对象  赋予class  
        <!-- <div @click="handleDivClick"
            :class="{activated: isActivated}"
        >
        Hello word

       </div> -->

       //  数组赋予 class
       <!-- <div @click="handleDivClick"
            :class="[activated]"
        >
        Hello word

       </div> -->
        //  style 样式
       <!-- <div :style="styleObj"  @click="handleDivClick">
        Hello word
       </div> -->

    <div :style="[styleObj,{fontSize:'20px'}]"  @click="handleDivClick">
        Hello word
       </div>
    </div>
    
    <script>
        //原生
       // var dom = document.getById('app');
       // dom.innerHtml = 'hello word';

       //  class 的对象绑定
       var vm = new Vue({
           el:"#app",
           data: {
               //    对象 赋予 class  属性变量
               //isActivated : false
               //  数组赋予class  
               //activated :""
               //  style
               styleObj :{
                   color: "red"
               }
            },
           //  对象 赋予 class  属性
        //    methods: {
        //        handleDivClick: function(){
        //             this.isActivated = !this.isActivated
        //        }
        //    }
        //  数组 赋予 class  属性
        // methods: {
        //     handleDivClick: function(){
        //         this.activated = this.activated === "activated" ?
        //             "" : "activated"
        //     }
        // }

        // style  对象   style   数组  
         methods: {
            handleDivClick: function(){
                 this.styleObj.color = this.styleObj.color === "black" ?
                    "red" : "black"
             }
         }
          
       });
       
    </script>
</body>
</html>